import React, { Component } from 'react';
import { Link } from 'react-router-dom';
class App extends Component {

  useroperation () {
    if (document.querySelector('.user-menu').style.display === 'block') {
      document.querySelector('.user-menu').style.display="none";
    } else {
      document.querySelector('.user-menu').style.display="block";
    }
    
  }
  render() {
    return (
      <div className="common-header">
        <div className='logo'>
          <img src="https://b-gold-cdn.xitu.io/v3/static/img/logo.a7995ad.svg" alt=""></img>
        </div>
        <ul className="common-nav">
          <li>
            <Link className='active' to='/'>首页</Link>
          </li>
          <li><Link to='/activities'>动态</Link></li>
          <li><Link to='/topics'>话题</Link></li>
          <li><Link to='/book'>小册</Link></li>
          <li><Link to='/huodong'>活动</Link></li>
        </ul>
        <div className="common-search">
          <div className='search-from'>
            <input type="text" placeholder='搜索掘金' />
            <span className="iconfont icon-sousuo"></span>
          </div>
        </div>
        <div className="douser">
          <ul>
            <li>
              <div className='articlebtn'>
                <div className='text'><Link to="/subscribed">写文章</Link></div>
                <div className='select'><i className='iconfont icon-jiantou-up-down'></i></div>
              </div>
            </li>
            <li><Link to='/notification'><i className='iconfont icon-lingdang'></i></Link></li>
            <li onClick={ this.useroperation.bind(this)}><i className='iconfont icon-yonghu'></i></li>
          </ul>
        </div>
        <div className='user-menu'>
          <div>
            <li>
              <i className='iconfont icon-shuxie-'></i>
              <span><Link to="/subscribed">写文章</Link></span>
            </li>
            <li>
              <i className='iconfont icon-caogao'></i>
              <span>草稿</span>
            </li>
          </div>
          <div>
            <li>
              <i className='iconfont icon-yonghu'></i>
              <span>我的主页</span>
            </li>
            <li>
              <i className='iconfont icon-zan1'></i>
              <span>我赞过的</span>
            </li>
            <li>
              <i className='iconfont icon-shoucang'></i>
              <span>我的收藏集</span>
            </li>
            <li>
              <i className='iconfont icon-gouwuche'></i>
              <span>已购</span>
            </li>
            <li>
              <i className='iconfont icon-biaoqian'></i>
              <span>标签管理</span>
            </li>
          </div>
          <div>
            <li className='set-up'>
              <i className='iconfont icon-shezhi'></i>
              <span>设置</span>
              <i className='iconfont icon-gengduo'></i>
              <div className='more-dropdown-list'>
                <ul>
                  <li>下载应用</li>
                  <li>关于</li>
                  <li>加入我们</li>
                  <li>翻译计划</li>
                  <li>合作伙伴</li>
                </ul>
              </div>
            </li>
            <li>
              <i className='iconfont icon-guanyu'></i>
              <span>关于</span>
            </li>
          </div>
          <div>
            <li>
              <i className='iconfont icon-out'></i>
              <span>登出</span>
            </li>
          </div>
        </div>
      </div>
    );
  }
}

export default App;
